<!DOCTYPE html>
<html lang="en">
<style>
pre {
    background: #EEE;
    border: 1px solid #CCC;
    padding: 10px;
}
#page-wrapper {
    border-top: 5px solid #69c773;
    margin: 1em auto;
    width: 600px;
}
</style>

<script>
window.onload = function() {
    function $(selector) {
        return document.querySelector(selector);
    }
    
    /*var socket = new WebSocket('ws://192.168.2.239:7890');*/
    var socket = new WebSocket('ws://192.168.1.140:7890');
    socket.onopen = function(event) {
        $('#messages').innerHTML = 'Connected<br>';
    };
    socket.onmessage = function(event) {
        $('#messages').innerHTML = 'Received:<br>' + event.data + '<br>';
    };
    socket.onclose = function(event) {
        $('#messages').innerHTML = 'Disconnected ' + event.reason;
    };

    $('#submit').onclick = function(e) {
        socket.send($('#message').value);
        $('#messages').innerHTML = 'Sent:<br>' + $('input').value + '<br>';
        $('input').value = '';
    };

    $('#btnOFF').onclick = function(e) {
        socket.send("off");
        $('#messages').innerHTML = 'Sent:<br>off<br>';
    };
        
    $('#btnSET').onclick = function(e) {
        socket.send("set");
        $('#messages').innerHTML = 'Sent:<br>set<br>';
    };
    
    $('#btnSETALT').onclick = function(e) {
        socket.send("set_alt");
        $('#messages').innerHTML = 'Sent:<br>set<br>';
    };

    $('#btnOFF').onclick = function(e) {
        socket.send("off");
        $('#messages').innerHTML = 'Sent:<br>off<br>';
    };
    
    $('#btnX').onclick = function(e) {
        socket.send("x "+$('#pX').value);
        $('#messages').innerHTML = 'Sent:<br>'+"x "+$('#pX').value+'<br>';
    };
    
    $('#btnY').onclick = function(e) {
        socket.send("y "+$('#pY').value);
        $('#messages').innerHTML = 'Sent:<br>'+"y "+$('#pY').value+'<br>';
    };

    $('#btnZ').onclick = function(e) {
        socket.send("z "+$('#pZ').value);
        $('#messages').innerHTML = 'Sent:<br>'+"z "+$('#pZ').value+'<br>';
    };
    
    $('#btnXoff').onclick = function(e) {
        socket.send("x -1.0");
        $('#messages').innerHTML = 'Sent:<br>x -1.0<br>';
    };
    
    $('#btnYoff').onclick = function(e) {
        socket.send("y -1.0");
        $('#messages').innerHTML = 'Sent:<br>y -1.0<br>';
    };
    
    $('#btnZoff').onclick = function(e) {
        socket.send("z -1.0");
        $('#messages').innerHTML = 'Sent:<br>z -1.0<br>';
    };
    

    $('#btnXoff').onclick = function(e) {
        socket.send("x -1.0");
        $('#messages').innerHTML = 'Sent:<br>x -1.0<br>';
    };
    
    $('#pX').value = "-1.0";
    $('#pY').value = "-1.0";
    $('#pZ').value = "-1.0";
    
};
</script>

<div id="page-wrapper">
    <pre id="messages">Connecting...</pre>
    
    <button id="btnOFF" style="WIDTH:150px; HEIGHT: 50px">OFF</button>
    <button id="btnSET" style="WIDTH: 100px; HEIGHT: 50px">SET</button>
    <button id="btnSETALT" style="WIDTH: 100px; HEIGHT: 50px">SET_ALT</button>
    </br></br>
    
    <button id="btnX" style="WIDTH: 100px; HEIGHT: 50px">Send X</button>
    <input id="pX" style="WIDTH: 100px; HEIGHT: 50px">
    <button id="btnXoff" style="WIDTH: 100px; HEIGHT: 50px">X Off</button>
    </br></br>    
    <button id="btnY" style="WIDTH: 100px; HEIGHT: 50px">Send Y</button>
    <input id="pY" style="WIDTH: 100px; HEIGHT: 50px">
    <button id="btnYoff" style="WIDTH: 100px; HEIGHT: 50px">Y Off</button>
    </br></br>
    <button id="btnZ" style="WIDTH: 100px; HEIGHT: 50px">Send Z</button>
    <input id="pZ" style="WIDTH: 100px; HEIGHT: 50px">
    <button id="btnZoff" style="WIDTH: 100px; HEIGHT: 50px">Z Off</button>
    </br></br></br>
    
    <input id="message" required>
    <button id="submit">Send Message</button>
</div>

